<template>
  <div class="formDesign">
    <header>{{i18n('tltle.documents','最近新建的单据')}}</header>
    <ul class="designBox">
      <li @click="addForm">
        <span class="icons">
          <a-icon type="plus" />
        </span>
        <p>{{i18n('tltle.documentsNew','新建单据')}}</p>
        <div class="hideBox" v-show="hide">
            <div class="designMode" @click="selectItem('create')">
              <p>{{i18n('tltle.creation','在线建单')}}</p>
              <dl>
                <dd><em>1</em>{{i18n('tltle.document','单据设计')}}</dd>
                <dd><em>2</em>{{i18n('tltle.scheme','单据方案')}}</dd>
                <dd><em>3</em>{{i18n('tltle.documentsGenerate','生成单据')}}</dd>
              </dl>
            </div>
            <div class="designMode" @click="selectItem('genBo')">
              <p>{{i18n('tltle.creation','在线建单')}}</p>
              <dl>
                <dd><em>1</em>{{i18n('tltle.objectBusiness','业务对象')}}</dd>
                <dd><em>2</em>{{i18n('tltle.modelGeneration','生成模型')}}</dd>
                <dd><em>3</em>{{i18n('tltle.scheme','单据方案')}}</dd>
                <dd><em>4</em>{{i18n('tltle.documentsGenerate','生成单据')}}</dd>
              </dl>
            </div>
        </div>
      </li>
      <li>
        <span class="icons blue">
         <a-icon type="container" />
        </span>
        <p>{{i18n('tltle.attendance','我的考勤')}}</p>
      </li>
      <li>
        <span class="icons red">
          <a-icon type="file-exclamation" />
        </span>
        <p>{{i18n('tltle.formLeave','请假单')}}</p>
      </li>
      <li>
        <span class="icons green">
          <a-icon type="money-collect" />
        </span>
        <p>{{i18n('tltle.reimbursement','报销申请')}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
    export default {
        name: 'form-design',
        components: {},
        data() {
            return {
              hide:false,
            }
        },
        computed: {},
        created() {
        },
        mounted() {
        },
        methods: {
            i18n(name, text, key) {
                return this.$ti18(name, text, "functionNav", key);
            },
          addForm(){
              this.hide =!this.hide
          },
          selectItem(key){
            var url = '/form/';
            if(key=='create'){
              url+="design/-1";
            }else if(key=='genBo'){
              url+="bo/-1";
            }
            window.open(url)
          },
        }
    }
</script>

<style scoped>
  .formDesign header{
    font-size: 16px;
    font-weight: bold;
    color: #333333;
  }
  .designBox{
    font-size: 0;
    padding-top: 16px;
  }
  .designBox>li{
    font-size: 14px;
    display: inline-block;
    vertical-align: top;
    width: 130px;
    text-align: center;
    border: solid 1px #e8e8e8;
    border-radius: 4px;
    margin-left: 10px;
    margin-bottom: 10px;
    padding: 14px 0 0;
    min-height: 100px;
    /*box-shadow: 0px 1px 3px 0px rgba(6, 0, 1, 0.1);*/
    cursor: pointer;
    position: relative;

    position: relative;
  }
  .designBox >li:hover{
    box-shadow: 0px 1px 3px 0px rgba(6, 0, 1, 0.1);
  }
  .designBox >li .icons{
    display: inline-block;
    font-size: 16px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 21px;
    background: #4D9EFF;
    color: #fff;
  }
  .designBox >li:first-child .icons{
    background: #f0f2f5;
    color: #999999;
  }
  .designBox >li p{
    padding: 12px 0 10px;
  }

  .blue{
    background: #5d9cee!important;
  }
  .red{
    background: #f96d64!important;
  }
  .green{
    background: #13d7ac!important;
  }

  /*新建单据*/
  .hideBox{
    position: absolute;
    top: calc( 100% + 16px );
    background: #fff;
    border-radius: 4px;
    border: 1px solid #e8e8e8;
    text-align: left;
  }
  .hideBox:before{
    position: absolute;
    content: '';
    display: inline-block;
    border-top: 1px solid #e8e8e8;
    border-left: 1px solid #e8e8e8;
    width: 12px;
    height: 12px;
    top: -7px;
    left: 57px;
    transform: rotate(45deg);
    z-index: 1;
    background: #fff;
  }
  .designMode{
    padding: 10px;
    position: relative;
    z-index: 6;

  }
  .designMode:hover{
    background: #f6fbff;
  }
  .designMode:hover p{
    color: #4D9EFF;
  }
  .designMode:first-child{
    border-bottom: 1px solid #e8e8e8;
  }
  .designMode dl{
    font-size: 0;
    white-space: nowrap;
    padding-bottom: 10px;
  }
  .designMode dl dd{
    font-size: 14px;
    display: inline-block;
    padding: 10px 28px;
    background: url("../../../../static/img/arrow.png") no-repeat;
    margin: 0;
    position: relative;
    margin-left: -14px;
  }
  .designMode dl dd:first-child{
    margin-left: 0;
  }
  .designMode dl dd em{
    display: inline-block;
    font-style: normal;
    width: 18px;
    height: 18px;
    border: 1px solid #768593;
    border-radius: 9px;
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    margin-right: 6px;
    color: #768593;
  }
</style>